<template>
<div class="stock">
  <component-header :title="title" :date="date" :path="path" :time='time' :status='status'></component-header>
  <zcfx-loadmore :top-method="loadTop" :auto-fill="false" ref="loadmore" class="loadingTop">
    <div class="main">
      <stock-analysis @changetime='changetime'></stock-analysis>
    </div>
  </zcfx-loadmore>
  <component-footer :page="page"></component-footer>
</div>
</template>

<script>
import Header from '../Header'
import Footer from '../Footer'
import StockAnalysis from './stock/StockAnalysis'
import TeansctionDet from './stock/TeansctionDet'
import LoadMore from '@/components/common/LoadMore'
import Cache from '@/common/cache'

export default {
  data() {
    return {
      page: 1,
      status: '',
      time: 1,
      title: '证券分析',
      date: '20170301~20170331',
      path: '/pages/Stock',
      // stockStatus:null
    }
  },
  components: {
    'component-header': Header,
    'component-footer': Footer,
    'stock-analysis': StockAnalysis,
    'teansction-det': TeansctionDet,
    'zcfx-loadmore': LoadMore
  },
  created() {
    if (this.$route.query.status) {
      this.status = this.$route.query.status;
    }
  },
  mounted() {
    TDAPP.onEvent('002028', '');
    TDAPP.send();
  },
  methods: {
    loadTop() {
      Cache.clear();
      this.$router.replace('/Loading');
      this.$nextTick(function() {
        this.$router.replace(this.path);
      });
      this.stockStatus == 0?this.stockStatus = 1:this.stockStatus = 0;
      this.$refs.loadmore.onTopLoaded();
    },
    changetime(index) {
      this.time = index;
    }
  }
}
</script>

<style scoped>
.stock {
  margin-top: 88px;
}

.content.stock {
  margin-bottom: 0;
}

.main {
  animation-duration: 200ms;
  animation-name: slide;
}

@keyframes slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.loadingTop{
  min-height: 600px;
}
</style>
